<!DOCTYPE html>

<html class="no-js">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsplumb@2.9.2/dist/js/jsplumb.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/3.7.0/animate.min.css" />
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/bee.js"></script>
</head>

<body>
    <div id="app">
        <el-button @click="handleDialog(0)">弹框单选</el-button>
        <el-dialog title="员工选择" :visible.sync="box1" v-dialogdrag class="bee-dialog" width="60%" top="8vh">
            <div style="height: 65vh; overflow: auto">
                <bee-tree-table :column="column" :tree-data="treeData" :curd-data="curdData" :page.sync="page"
                    :width="280" @node-click="handleTreeNode" @current-row="handleCurrentRow"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                     @search="handleSearch"></bee-tree-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="box = false">取 消</el-button>
                <el-button type="primary" @click="box = false">确 定</el-button>
            </span>
        </el-dialog>&nbsp;&nbsp;&nbsp;<el-button @click="handleDialog(1)">弹框多选</el-button>
        <el-dialog title="员工选择" :visible.sync="box2" v-dialogdrag class="bee-dialog" width="60%" top="8vh">
            <div style="height: 65vh; overflow: auto">
                <bee-tree-table :column="column" :tree-data="treeData" :curd-data="curdData" :multiple="true" :multlist="multiList"
                    :val-props="props" :page.sync="page" :width="300" placeholder="请输入员工姓名或员工号"
                    @node-click="handleTreeNode"  @search="handleSearch"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                    @close-tag="handleCloseTag">
                </bee-tree-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="box = false">取 消</el-button>
                <el-button type="primary" @click="box = false">确 定</el-button>
            </span>
        </el-dialog>
        <h4>单选</h4>
        <bee-tree-table :column="column" :tree-data="treeData" :curd-data="curdData" :page.sync="page" :width="280"
            @node-click="handleTreeNode" @current-row="handleCurrentRow" @crud-load="handleCrudLoad"
            @search="handleSearch"></bee-tree-table>
        <h4>多选</h4>
        <bee-tree-table ref="beeTreeTable" :column="column" :tree-data="treeData" :curd-data="curdData" :multiple="true" :val-props="props" :multlist="multiList" :opt="options"
            :page.sync="page" :width="300" placeholder="请输入员工姓名或员工号" @node-click="handleTreeNode"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" @search="handleSearch" @selection="handleSelection" @close-tag="handleCloseTag">
        </bee-tree-table>
        <div style="margin-top: 20px">
          <el-button @click="toggleSelection([curdData[1], curdData[2]])">切换第二、第三行的选中状态</el-button>
        </div>
    </div>
</body>
<script>
    const staffData = [
        { ida: '1', name: '用户 1', code: '11', post: '前端开发', dept: '技术部' },
        { ida: '2', name: '用户 2', code: '22', post: '前端开发', dept: '技术部2'  },
        { ida: '3', name: '用户 3', code: '33', post: '前端开发', dept: '技术部3'  },
        { ida: '4', name: '用户 4', code: '44', post: '前端开发', dept: '技术部4'  }
    ]
    new Vue({
        el: '#app',
        data() {
            return {
                box1: false,
                box2: false,
                page: {
                    pageSize: 1,
                    pagerCount: 5,
                },
                options: {
                    rowKey: 'ida'
                },
                column: [
                    {
                        label: "员工姓名",
                        prop: "name",
                    },
                    {
                        label: "工号",
                        prop: "code",
                    },
                    {
                        label: "部门",
                        prop: "dept",
                    },
                    {
                        label: "岗位",
                        prop: "post",
                    },
                ],
                treeData: [
                    {
                        value: 0,
                        label: "一级部门",
                        children: [
                            {
                                value: 1,
                                label: "一级部门1",
                            },
                            {
                                value: 2,
                                label: "一级部门2",
                            },
                            {
                                value: 3,
                                label: "一级部门3",
                            },
                            {
                                value: 4,
                                label: "一级部门4",
                            },
                        ],
                    },
                ],
                curdData: [],
                multiList: [],
                props: {
                    label: 'label'
                }
            };
        },
        mounted() {
            this.loadCrudData()
            this.$nextTick(()=> {
                // console.log('refs', this.$refs.beeTreeTable.$refs.treeTable)
                this.multiList = [{'label': '测试1', 'value': '111'}]
            })
        },
        methods: {
            handleDialog(type) {
                type ? (this.box2 = true) : (this.box1 = true);
            },
            loadCrudData() {
                this.curdData = staffData;
                this.page.total = 22;
            },
            handleCrudLoad(page) {
            alert(2)
                console.log(page)
                this.page.currentPage = page.currentPage
                this.loadCrudData()
            },
            handleTreeNode(data) {// 左树节点点击事件
                alert(999)
                this.$message.success(JSON.stringify(data));
            },
            handleCurrentRow(val) {// 表格行单击
                this.$notify({
                    showClose: true,
                    message: "单选" + JSON.stringify(val),
                    type: "success",
                });
            },
            handleSearch(params) { // 查询
                this.$notify({
                    showClose: true,
                    message: "查询结果" + JSON.stringify(params),
                    type: "success",
                });
            },
            handleSelection(list) { // 查询
                this.$notify({
                    showClose: true,
                    message: "查询结果" + JSON.stringify(list),
                    type: "success",
                });
            },
            handleCloseTag(data) { // 关闭标签
                alert(data)
            },
            toggleSelection(rows) {
                if (rows) {
                rows.forEach(row => {
                    this.$refs.beeTreeTable.$refs.treeTable.toggleRowSelection(row);
                });
                } else {
                    this.$refs.beeTreeTable.$refs.treeTable.clearSelection();
                }
            },
            handleSizeChange(val) {
                alert('size')
            },
            handleCurrentChange(val) {
                alert('handleCurrentChange')
                
            }
        }
    })
</script>

</html>